<form id="addOrUpdateForm" lay-filter="addOrUpdateForm" class="layui-form model-form">

<!--
  <input name="id" type="hidden"/>
-->
  <div class="layui-form-item">
    <label class="layui-form-label layui-form-required">预约时间</label>
    <div class="layui-input-block">
      <input name="maketime" id="maketime" class="layui-input" readonly lay-verType="tips" lay-verify="required" required/>
    </div>
  </div>
  <div class="layui-form-item" style="display:none">
    <label class="layui-form-label layui-form-required">泳池名称</label>
    <div class="layui-input-block">
      <input name="name" id="poolname" class="layui-input" placeholder="请输入泳池名称" lay-verType="tips" lay-verify="required" required/>
      <input name="price" id="price" class="layui-input" lay-verType="tips" lay-verify="required" required/>
    </div>
  </div>


<!--
  <div class="layui-form-item">
    <label class="layui-form-label layui-form-required">预约教练</label>
    <div class="layui-input-block">

      <select name="coachname" id="coachname" lay-verType="tips" lay-verify="required">

      </select>
    </div>
  </div>
-->

  <div class="layui-form-item">
    <label class="layui-form-label layui-form-required">场地费</label>
    <div class="layui-input-block">
      <input name="price" class="layui-input layui-disabled" readonly  placeholder="请输入金额"  lay-verType="tips" />
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">期望教练</label>
    <div class="layui-input-block">
      <select name="jiaolian" id="jiaolian"  lay-filter="jiaolian" lay-verType="tips">
        <option value=""></option>
      </select>
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label ">教练金额</label>
    <div class="layui-input-block">
      <input name="coachprice" class="layui-input layui-disabled" readonly placeholder="请输入教练金额"  lay-verType="tips" />
    </div>
  </div>


  <div class="layui-form-item text-right">
    <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
    <button class="layui-btn" lay-filter="formSubmitBtn" lay-submit>保存</button>
  </div>
</form>

<script>
  layui.use(['layer', 'form', 'admin', 'xnUtil', 'xmSelect', 'laydate' , 'upload', 'laydate'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var admin = layui.admin;
    var xnUtil = layui.xnUtil;
    var xmSelect = layui.xmSelect;
    var laydate = layui.laydate;
    var upload = layui.upload;
    var img;

    laydate.render({
      elem: '#maketime',
      type: 'datetime',
      range: '~',
      trigger: 'click'
    });

    var m = new Map();

    $.ajax({
      type: 'get',
      url: getProjectUrl() + 'sysUser/selectCoach',
      success: function (res) {
        var dom = $("#jiaolian");
        var html = '<option value="">----不选择教练----</option>';
       for(var i=0;i<res.data.length;i++) {
          html += '<option value="'+res.data[i].name+'">'+res.data[i].name+'</option>';
          m.set(res.data[i].name,res.data[i].coachprice);
       }
       dom.html(html);
        form.render("select");
      },
      error: function(res) {
        layer.msg(res.responseText, {icon: 2, anim: 6});
      }
    });

    form.on('select(jiaolian)',function (data) {
      var jiaolian = data.value;
      let newVar = m.get(jiaolian);
      $('[name="coachprice"]').val(newVar);
      form.render();
    })

    var uploadInst = upload.render({
      elem: '#img'
      ,url: getProjectUrl() + 'sysFileInfo/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#demo1').attr('src', result); //图片链接（base64）
        });

      }
      ,done: function(res){

        img = res.data;
        //上传成功的一些操作
        //……
        $('#demoText').html(''); //置空上传失败的状态
      }
      ,error: function(){
        //演示失败状态，并实现重传
        var demoText = $('#demoText');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function(){
          uploadInst.upload();
        });
      }
      //进度条
      ,progress: function(n, elem, e){
        element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
        if(n == 100){
          layer.msg('上传完毕', {icon: 1});
        }
      }
    });
    var editData = admin.getLayerData('#addOrUpdateForm').data;
    if(editData !== null && editData !== undefined) {
      form.val('addOrUpdateForm', editData);
    }

    /**
     * 表单提交事件
     */
    form.on('submit(formSubmitBtn)', function (data) {
      layer.load(2);
      data.field.poolname = $("#poolname").val();
      data.field.coachname = data.field.jiaolian;
      console.log(data.field.poolname);
      var url =getProjectUrl() + 'book/add' ;
      admin.req(url, JSON.stringify(data.field), function(res){
        layer.msg(res.message, {icon: 1, time: 1000}, function () {
          admin.putLayerData('formOk', true, '#addOrUpdateForm');
          admin.closeDialog('#addOrUpdateForm');
        });
      }, 'post');
      return false;
    });
  });
</script>
</body>
</html>
